﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html class="ui-page-login">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="~/Content/UI/css/mui.min.css" rel="stylesheet" />
    <link href="~/Content/UI/css/mdui.min.css" rel="stylesheet" />
    <style>
        .ui-page-login,
        body {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        .mui-content {
            height: 100%;
        }

        .area {
            margin: 20px auto 0px auto;
        }

        .mui-input-group:first-child {
            margin-top: 20px;
        }

        .mui-input-group label {
            width: 22%;
        }

        .mui-input-row label ~ input,
        .mui-input-row label ~ select,
        .mui-input-row label ~ textarea {
            width: 78%;
        }

        .mui-checkbox input[type=checkbox],
        .mui-radio input[type=radio] {
            top: 6px;
        }

        .mui-content-padded {
            margin-top: 25px;
        }

        .mui-btn {
            padding: 10px;
        }

        .mui-input-group label {
            width: 26%;
            padding-top: 14px;
            padding-bottom: 14px;
            text-align: left;
        }

        .mui-input-row label ~ input,
        .mui-input-row label ~ select,
        .mui-input-row label ~ textarea {
            width: 74%;
        }

        .mui-input-row .mui-input-clear ~ .mui-icon-clear,
        .mui-input-row .mui-input-password ~ .mui-icon-eye {
            right: 15px;
        }

        .mui-input-row .mui-input-password ~ .mui-icon-eye {
            font-size: 22px;
            top: 12px;
        }

        .mui-input-row label ~ #VerificationCode {
            width: 48%;
            box-sizing: border-box;
        }

        .mui-input-row .mui-btn {
            width: 26%;
            box-sizing: border-box;
            right: 15px;
            padding: 8px 0px;
        }

        .mui-btn-outlined {
            margin-top: 6px;
            color: #00B4FF;
            border: 1px solid #00B4FF;
        }
    </style>
</head>

<body>
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">重置密码</h1>
    </header>
    <div class="mui-content">
        <form class="mui-input-group">
            <div class="mui-input-row">
                <label>手机号</label>
                <input id='phone' type="text" class="mui-input-clear mui-input" name="phone" placeholder="请输入手机号">
            </div>
            <div class="mui-input-row">
                <label>密码</label>
                <input id='password' type="password" class="mui-input-clear mui-input" name="password" placeholder="请输入密码">
            </div>
            <div class="mui-input-row">
                <label>确认</label>
                <input id='password_confirm' type="password" class="mui-input-clear mui-input" placeholder="请确认密码">
            </div>
            <div class="mui-input-row">
                <label>验证码</label>
                <button type="button" id="get_code" class="mui-btn mui-btn-outlined" onclick="senmobile(60);">获取验证码</button>
                <input id="VerificationCode" type="text" name="code" class="mui-input" placeholder="请输入验证码">
            </div>

        </form>
        <div class="mui-content-padded">
            <button id='reg' class="mui-btn mui-btn-block mui-btn-primary" onclick="register()">确定</button>
        </div>
        <div class="mui-content-padded">
            <p>密码重置页面</p>
        </div>
    </div>
    <script src="~/Content/UI/js/mui.min.js"></script>
    <script src="~/Content/UI/js/mdui.min.js"></script>
    <script src="~/Content/scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script>
			(function($, doc) {
				$.init();
				$.plusReady(function() {
					var regButton = doc.getElementById('reg');
					var accountBox = doc.getElementById('phone');
					var passwordBox = doc.getElementById('password');
					var passwordConfirmBox = doc.getElementById('password_confirm');
					var emailBox = doc.getElementById('email');
					regButton.addEventListener('tap', function(event) {
						var regInfo = {
							account: accountBox.value,
							password: passwordBox.value,
							email: emailBox.value
						};
						var passwordConfirm = passwordConfirmBox.value;
						if (passwordConfirm != regInfo.password) {
                            mdui.snackbar({
                                message: '两次输入密码不一致'
                            });
							return;
                        }

                        mdui.snackbar({
                            message: '修改成功！',
                            buttonText: '登陆',
                            onClick: function () {
                                window.location("/account/login");
                            },
                            onButtonClick: function () {
                                window.location("/account/login");
                            },
                            onClose: function () {
                                window.location("/account/login");
                            }
                        });
					});
				});
        }(mui, document));

        var issend = true;
        function senmobile(t) {
            if (issend) {
                //验证电话号码手机号码
                var phoneObj = document.getElementById('phone');
                var pw = document.getElementById('password');
                var get_code = document.getElementById('get_code');
                if (phoneObj.value != "") {
                    var phoneVal = phoneObj.value;
                    var p1 = /^1(3|4|5|7|8)\d{9}$/;
                    var me = false;
                    if (p1.test(phoneVal)) me = true;
                    if (!me) {
                        phoneObj.value = '';
                        mui.toast('请输入正确的手机号码');
                        phoneObj.focus();
                        return false;
                    } else if (pw.length < 6) {
                        mui.toast('密码长度不够6');
                        return false;
                    } else {

                        issend = false;
                        $.ajax({
                            url: "/Account/ResetPassword?phone="+phoneVal,
                            dataType: "json",
                            type: "POST",
                            data: { 'phone': phoneObj.value },
                            success: function (data) {
                                console.log(data);
                                if (data.hasOwnProperty("0")) {
                                    mdui.snackbar({
                                        message: data['0']
                                    });
                                    return false;
                                } else if (data.hasOwnProperty("2")) {
                                    mdui.snackbar({
                                        message: '错误: ' + data["2"]
                                    });
                                    return false;
                                } else if (data.hasOwnProperty("1")) {
                                    mdui.snackbar({
                                        message: data['1']
                                    });
                                }

                                for (i = 1; i <= t; i++) {
                                    window.setTimeout("update_a(" + i + "," + t + ")", i * 1000);
                                }

                            },
                            error: function () {
                                mdui.snackbar({
                                    message: "未知错误，请检查网络"
                                });
                            }
                        });

                    }
                } else {
                    plus.nativeUI.toast('手机号码不能为空！', { verticalAlign: 'center' });
                    return false;
                }
            }
        }

        function update_a(num, t) {
            var get_code = document.getElementById('get_code');
            if (num == t) {
                get_code.innerHTML = " 重新发送 ";
                issend = true;
            }
            else {
                var printnr = t - num;
                get_code.innerHTML = printnr + " 秒后重发";
            }
        }

        function register() {
            var phone = $('#phone').val();
            var pwd = $('#password').val();
            var pwd_confirm = $('#password_confirm').val();
            var code = $('#VerificationCode').val();
            var flag = true;
            if (phone == "") {
                mdui.snackbar({
                    message: '手机号不能为空'
                });
                flag = false;
            }
            if (pwd == "") {
                mdui.snackbar({
                    message: '密码不能为空'
                });
                flag = false;
            }
            if (pwd_confirm != pwd) {
                mdui.snackbar({
                    message: '两次密码输入不一致'
                });
                flag = false;
            }
            if (code == "") {
                mdui.snackbar({
                    message: '验证码不能为空'
                });
                flag = false;
            }

            if (flag) {
                $.ajax({
                    url: "/Account/ResetPasswordValid",
                    dataType: "json",
                    type: "POST",
                    data: { 'phone': phone, 'code': code, 'password': pwd },
                    success: function (data) {
                        console.log(data);
                        if (data.hasOwnProperty("error")) {
                            mdui.snackbar({
                                message: data['0']
                            });
                            return;
                        } else if (data.hasOwnProperty("success")) {
                            mdui.snackbar({
                                message: '修改成功！',
                                buttonText: '登陆',
                                onClick: function () {
                                    window.location("/account/login");
                                },
                                onButtonClick: function () {
                                    window.location("/account/login");
                                },
                                onClose: function () {
                                    window.location("/account/login");
                                }
                            });
                        }
                    },
                    error: function () {
                        mdui.snackbar({
                            message: "未知错误，请检查网络"
                        });
                    }
                });
            }
        }
    </script>
</body>

</html>